<template>
    <page class="cinema">
        <page-header>影院</page-header>
            <div class="content">
                <div class="queryDiv">
                    <div class="leftAddress" @click="isShowCityListView=true">{{currentCityObj.nm}}</div>
                    <div class="inputDiv" >
                        <input class="txtQuery" type="text" placeholder="搜影院">
                    </div>
                </div>
            </div>
        <city-list-view @getCity="getCity" v-if="isShowCityListView"></city-list-view>
    </page>
</template>

<script>
import cityList from "../config/cityList.js"
import {fromatData} from "../utils/datautils.js"
import cityListView from "../components/cityListView.vue"
export default {
    name:"cinema",
    data(){
        return {
            isShowCityListView:false,
            currentCityObj:cityList[0],
            cinemas:[]
        }
    },
    created(){
       this.showLoading("正在定位")
        var myCity = new BMap.LocalCity();
        myCity.get(result=>{
            var cityName = result.name.replace("市","");
            this.currentCityObj=cityList.find(item=>{
                return item.nm==cityName;
            })
            this.hideLoading()
          this.getCinmeaList(this.currentCityObj.id)
        });
    },
    methods:{
        getCinmeaList(cityId){
            this.showLoading("请求数据")
            var d="fromatData(new Date())"
            let url =`maoyanApi/ajax/cinemaList?day=${d}&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1556610847857&cityId=${cityId}`
            this.$http.get(url).then(res=>{
                this.cinemas=res.data.cinemas;
            this.hideLoading()
            }).catch(err=>{
                console.log(err)
            this.hideLoading()
            })
       },
	   getCity(cityItem){
		   this.currentCityObj=cityItem
		   this.isShowCityListView=false
		   this.getCinmeaList(this.currentCityObj.id)
	   }
    },
    components:{
        cityListView
    }

    
}
</script>

<style lang="scss" scoped> 
   @import "../assets/css/comm.scss";
   .cinema{
       @include flexbox(column);
       .content{
           flex: 1;
           overflow: auto;
           .queryDiv{
                @include flexbox();
                height: 1rem;
                background-color: #f5f5f5;
                align-items: center;
                .leftAddress{
                    width: 1.2rem;
                    font-size: .24rem;
                    @include flexbox();
                    justify-content: center;
                    align-items: center;
                }
                .inputDiv{
                    flex:1;
                    box-sizing: border-box;
                    padding: 0 .4rem;
                    .txtQuery{
                        width: 100%;
                        border: 1px solid lightgray;
                        border-radius: 5px;
                        text-align: center;
                        font-size: .24rem;
                        padding: .1rem;
                    }
                }
           }
       }
   }
</style>
